<!doctype html>
<html>

	<head>
		<title>常旅资料</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="assets/css/amazeui.min.css">
		<link rel="stylesheet" href="assets/css/style.css">
		<style type="text/css">
			.am-checkbox .am-icon-checked,
			.am-checkbox .am-icon-unchecked,
			.am-checkbox-inline .am-icon-checked,
			.am-checkbox-inline .am-icon-unchecked,
			.am-radio .am-icon-checked,
			.am-radio .am-icon-unchecked,
			.am-radio-inline .am-icon-checked,
			.am-radio-inline .am-icon-unchecked {
				font-size: 2rem
			}
			.hovertreelist-li{
				transition: all 0.15s ease-in;
			}
			.material #myCustomer li .cancel_box{
				background:orangered;
				/*height: 4.8rem;*/
				width: 7rem;
				text-align: center;
				line-height: 4.8rem;
				position: absolute;
				top:-1px;
				left:104%;
				/*right:2rem;*/
				border-radius: 0.5rem;
				color: #fff;
			}
			.stl{
				transform: translateX(-7rem);
			}
		</style>
	</head>
	<body>
		<div class="containter">
			<header data-am-widget="header" class="am-header am-header-default">
				<div class="am-header-left am-header-nav">
					<a href="javascript:;" onClick="javascript :history.back(-1);">
						<img src="assets/images/left.png">
					</a>
				</div>
				<h1 class="am-header-title">
      常旅资料
    </h1>
			</header>
			<div style="width: 100%; height:4rem;"></div>
			<div class="material">
				<p>常旅资料（共计<span id="total_num">0</span>人）</p>
				<ul id="myCustomer">
					<!--<li class="hovertreelist-li">
						
							<h2>张三</h2>
							<span>手机：18756458894</span><span>手机：18756458894</span>
							<img src="assets/images/a18.png">
							<div class="cancel_box">删除</div>
					</li>
					<li class="hovertreelist-li">
						
							<h2>张三</h2>
							<span>手机：18756458894</span><span>手机：18756458894</span>
							<img src="assets/images/a18.png">
						
					</li>
					<li class="hovertreelist-li">
						
							<h2>张三</h2>
							<span>手机：18756458894</span><span>手机：18756458894</span>
							<img src="assets/images/a18.png">
						
					</li>-->
				</ul>
				<button type="button" class="tjcylk" id="addCustomer">添加常用旅客</button>
			</div>
		</div>

		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/amazeui.min.js"></script>
		<script src="assets/js/allUse.js"></script>
		<!--6.10常旅资料-->
		<script type="text/javascript">
			var slide_fuc=function(){//滑动删除阉割版
				var StartSlide=function (direction,that){
					if(direction=="l"){//左滑动
						that.addClass("stl").siblings().removeClass("stl");
					}else if(direction=="r"){
						that.removeClass("stl");
					}
//					direction=null
				}
				$(".hovertreelist-li").on("touchstart",function(e){//触摸开始
					var that=$(this);
					var touch = event.targetTouches[0];
					var initX=touch.pageX//初始坐标;
					var direction;
					that.on("touchmove",function(e){
						var touch = event.targetTouches[0];
						var movX=touch.pageX//移动坐标
//						console.log(initX)
//						console.log(movX-initX-parseFloat($(".cancel_box").css("width"))/2)
//						parseFloat($(".cancel_box").css("width"))/2
//						console.log(movX-initX);
						if(movX-initX>20){//右滑
							direction="r";
						}else if(initX-movX>=20){//左滑
							direction="l";
							
						}
						StartSlide(direction,that);
						that.on("touchend",function(e){
							var touch = event.targetTouches[0];
							movX=null;
							touch=null;
							initX=null;
							direction=null;
						})
					})
					
				})
				
			};
			//下......获取常旅列表
			$.ajax({
				type: "get",
				url: url_enter+"/api/get_my_peer_list",
				headers: {
					"User-Token":token,
					"Os": localStorage.ios_Andriod,
					"Device-Id": "",
					"Screen": localStorage.wh,
					"Content-Type": "application/x-www-form-urlencoded"
				},
				data: {},
				success: function(data, status, xhr) {
					console.log(data);
					if(data.result!==1){
						if(data.result==105){
							window.location.href="login.html"
						}else{
							alert(data.message);
							return;
						}
						
					};
					if(data.data.peer_num===0){
						alert("您暂时没有添加常用旅客");
						return
					}
					$("#total_num").html(data.data.peer_list.length)
					for(var i=0;i<data.data.peer_list.length;i++){
						$("#myCustomer").append('<li class="hovertreelist-li"><div style="float: left;"><h2>'
						+data.data.peer_list[i].real_name+'</h2><span>手机：'
						+data.data.peer_list[i].phone_num+'</span><span>生日：'
						+data.data.peer_list[i].birthday+'</span></div><div class="line_height_box" style="float: right;height: 100%;vertical-align: middle;"><img class="change_information" peer_id="'
						+data.data.peer_list[i].peer_id+'" src="assets/images/a18.png"/></div><div class="cancel_box" peer_id="'
						+data.data.peer_list[i].peer_id+'">删除</div></li>')
						
					};
					$(".line_height_box").css({"line-height":parseFloat($(".hovertreelist-li").css("height"))+"px","position":"absolute"})
					$(".cancel_box").css({"line-height":parseFloat($(".hovertreelist-li").css("height"))+"px","position":"absolute"})
//					$(".cancel_box").css("height",$(".hovertreelist-li").css("height"))
					$("#myCustomer li .change_information").click(function(){
						//修改旅客信息 储存在session 里 传到 change_message
						sessionStorage.setItem("form_peer_id",$(this).attr("peer_id"));
						window.location.href="change_message.html?from=material";
					});
					slide_fuc()	
//					cancel();
					$(".cancel_box").one("click",function(){
						$.ajax({
							type:"post",
							url:url_enter+"/api/delete_one_peer",
							async:true,
							headers:headers,
							data:{
								"peer_id":$(this).attr("peer_id")
							},
							success:function(data){
								if(data.result===1){
									alert("操作成功");
									window.location.reload()
								}
							}
						});
					})
					
				},
				error: function(xhr, status, thrown) {
					console.log(xhr);
				}
			})
			//上......获取常旅列表
			
//			function cancel(){//话滑动删除完美版
//					var initX;
//					var moveX;
//					var myCustomer=document.getElementById("myCustomer");
//					var X = 0;
//					var objX = 0;
//					myCustomer.addEventListener('touchstart',function(event){
////					event.preventDefault();
//					var obj = event.target.parentNode;
//					if(obj.className == "hovertreelist-li"){
//					initX = event.targetTouches[0].pageX;
//					objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
//					}
//					if( objX == 0){
//					myCustomer.addEventListener('touchmove',function(event) {
//					var obj = event.target.parentNode;
//					if (obj.className == "hovertreelist-li") {
//					moveX = event.targetTouches[0].pageX;
//					event.preventDefault();
//					X = moveX - initX;
//					if (X > 0) {
//					obj.style.WebkitTransform = "translateX(" + 0 + "px)";
//					}
//					else if (X < 0) {
//					var l = Math.abs(X);
//					obj.style.WebkitTransform = "translateX(" + -l + "px)";
//					if(l>parseFloat($(".cancel_box").css("width"))){
//					l=parseFloat($(".cancel_box").css("width"));
//					obj.style.WebkitTransform = "translateX(" + -l + "px)";
//					}
//					}
//					}
//					});
//					}
//					else if(objX<0){
//					myCustomer.addEventListener('touchmove',function(event) {
//					event.preventDefault();
//					var obj = event.target.parentNode;
//					if (obj.className == "hovertreelist-li") {
//					moveX = event.targetTouches[0].pageX;
//					X = moveX - initX;
//					console.log("end")
//					if (X > 0) {
//					var r = -(parseFloat($(".cancel_box").css("width"))) + Math.abs(X);
//					obj.style.WebkitTransform = "translateX(" + r + "px)";
//					if(r>0){
//					r=0;
//					obj.style.WebkitTransform = "translateX(" + r + "px)";
//					}
//					}
//					else { //向左滑动
//					obj.style.WebkitTransform = "translateX(" + -(parseFloat($(".cancel_box").css("width"))) + "px)";
//					}
//					}
//					});
//					}
//					
//					})
//					myCustomer.addEventListener('touchend',function(event){
//						var obj = event.target.parentNode;
////						event.preventDefault();
//						if(obj.className == "hovertreelist-li"){
//							objX =(obj.style.WebkitTransform.replace(/translateX\(/g,"").replace(/px\)/g,""))*1;
//							if(objX>-(parseFloat($(".cancel_box").css("width")))){
//							obj.style.WebkitTransform = "translateX(" + 0 + "px)";
//							}else{
//							obj.style.WebkitTransform = "translateX(" + -(parseFloat($(".cancel_box").css("width"))) + "px)";
//							}
//						};
//						
//					});
//				};//上......删除效果
			
			
			$("#addCustomer").click(function(){
				window.location.href="change_message.html?from=material_add"
			})
		</script>
		<!--6.11常旅资料详情-->
		<script type="text/javascript">
//			$.ajax({
//				type: "get",
//				url: "http://119.23.70.141/api/get_relative_detail",
//				headers: {
//					"User-Token": "abc",
//					"Os": localStorage.ios_Andriod,
//					"Device-Id": "pc",
//					"Screen": localStorage.wh,
//					"Content-Type": "application/x-www-form-urlencoded"
//				},
//				data: {
//					//						“tourist_id”:1 //常旅资料ID序列号，整数类型（Int）
//				},
//				success: function(data, status, xhr) {
//					console.log(data);
//					
//				},
//				error: function(xhr, status, thrown) {
//					console.log(xhr);
//				}
//			});
		</script>
	</body>

</html>